<template>
    <div class="component-news-right">
        <div class="text-box">
            <div class="title">{{data.title}}</div>
            <div class="date">{{data.date}}</div>
        </div>
        <img class="icon" :src="data.src">
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';
    
    .component-news-right{

        &:not(:last-child){
            border-bottom: 1px solid @color-line-gray;
        }

        display: flex;
        padding: 1.2rem .9rem 1.2rem 0;
        margin-left: .9rem;
        .text-box{
            flex: 1;

            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .title{
                font-size: 1.6rem;
                line-height: 2.3rem;
            }
            .date{
                margin-top: .7rem;
                font-size: 1.3rem;
                line-height: 1.9rem;
            }
        }
        .icon{
            width: 7rem;
            height:7rem;
            margin-left: 1.2rem;
        }

    }
    
</style>

<script>
    export default {
        props: ['data']
    }
</script>